<!--
 * @Description: 资源管理---运维资源---数据目录
 * @Author: 魏勇
 * @Date: 2020-03-09 15:36:26
 * @LastEditTime: 2020-03-31 18:16:32
 * @LastEditors: 魏勇
 -->
<template>
    <div class="dynamicForm" style="padding: 0 15px;">
        <el-row class="form-row" v-show="itemObj.show" :key="index" v-for="(itemObj,index) in items">
            <!--普通输入框-->
            <el-input-ctl :disabledField="disabledField" :itemObj="itemObj" v-model="itemObj.value"
                          v-if="itemObj.editorType==='input'||itemObj.editorType==null"></el-input-ctl>
            <!--下拉输入框-->
            <el-select-ctl :disabledField="disabledField" @changeVal="changeVal" :itemObj="itemObj" v-model="itemObj.value"
                          v-if="itemObj.editorType==='selectDrop'"></el-select-ctl>

            <!--日期输入框-->
            <el-date-ctl :disabledField="disabledField" @changeVal="changeVal" :itemObj="itemObj" v-model="itemObj.value"
                           v-if="itemObj.editorType==='date'"></el-date-ctl>
            <!--组合-->
            <el-group  :disabledField="disabledField" @changeVal="changeVal" :itemObj="itemObj" v-model="itemObj.value"
                   v-if="itemObj.editorType==='group'"></el-group>
            <!--组合数组-->
            <el-group-array  :disabledField="disabledField" @changeVal="changeVal" :itemObj="itemObj" v-model="itemObj.value"
                       v-if="itemObj.editorType==='groupArray'"></el-group-array>

            <!--动态查询下拉-->
            <el-filter-select-ctl :flushFilter="flushFilter" :disabledField="disabledField" @changeVal="changeVal" :itemObj="itemObj" v-model="itemObj.value"
                           v-if="itemObj.editorType==='filterSelect'"></el-filter-select-ctl>
        </el-row>

    </div>
</template>

<script>
    import elInputCtl from './el-input-ctl';
    import elDateCtl from './el-date-ctl';
    import elSelectCtl from './el-select-ctl';
    import elGroup from './el-group';
    import elGroupArray from './el-group-array';
    import elFilterSelectCtl from './el-filter-select-ctl';

    export default {
        name: "dynamicForm",
        components: {
            elInputCtl,
            elSelectCtl,
            elDateCtl,
            elGroup,
            elGroupArray,
            elFilterSelectCtl
        },
        props: {
            flushFilter:{type:[String,Number],default:''},
            disabledField: {
                type: Array, default: () => {
                    return []
                }
            },
            items: {
                type: Array, default: () => {
                    return []
                }
            }
        },
        computed: {},
        data: () => ({}),
        created() {

        },
        mounted() {
        },
        watch: {},
        methods: {
            changeVal({id,val}){
                this.$emit('changeVal',{id,val})
            },
            //数据校验
            validate() {
                let flag=true;
                this.$children.forEach((itemObj) => {
                    itemObj.validate && itemObj.validate();
                    itemObj.$children.forEach((itemObjSon) => {
                        itemObjSon.validate && itemObjSon.validate();
                        let backflag=itemObjSon.getErrorFlag();
                        if(flag&&backflag===true){
                            flag=false;
                        }
                    })
                });
                return flag;
            }
        }
    };
</script>

<style lang="scss">
    .form-row {
        margin-bottom: 5px;
    }

    .form-label {
        line-height: 32px;
        margin-right: 10px;
    }

    .required {
        color: red;
    }
</style>